import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios'
import { Menu } from 'antd';
import {
    MailOutlined
} from '@ant-design/icons';
import logo from './logo.png';
import './style.css';
class AppHeader extends React.Component {
    constructor(props) {
        super(props);
        this.baseUrl = '/data.json';
        this.state = {
            titleArr: []
        }
    }
    getTitleData() {
        return this.state.titleArr.map((item, index) => {
            return (
                <Menu.Item key={item.id}>
                    <Link to={`/${item.id}`}>
                        <MailOutlined />
                        {item.text}
                    </Link>
                </Menu.Item>
            )
        })
    }
    componentDidMount() {
        axios.get(this.baseUrl)
            .then((res) => {
                let data = res.data
                if (data.code === '0' && data.data && data.data.length) {
                    this.setState({
                        titleArr: data.data
                    })
                }
            })
    }
    render() {
        return (
            <Fragment>
                <img src={logo} alt="logo" className="app-header-logo" />
                <Menu mode="horizontal" className="menu">
                    {this.getTitleData()}
                </Menu>
            </Fragment>
        )
    }
}
export default AppHeader;